<template>  
    <div class="all">  
      <h2>招聘信息列表</h2>  
      <ul>  
        <li v-for="job in jobList" :key="job.id">  
          {{ job.title }} - {{ job.company }}  
        </li>  
      </ul>  
    </div>  
  </template>
  <script>    
  export default {    
    data() {    
      return {    
        jobList: [ { id: 1, title: '软件开发工程师', company: 'A公司' },  
        { id: 2, title: '前端开发工程师', company: 'B公司' },  
        { id: 3, title: '后端开发工程师', company: 'C公司' }  ]  // 初始化为空数组    
      };    
    },  
    created() {  
      this.fetchJobs(); // 在组件创建时调用 fetchJobs 方法来获取招聘信息  
    },  
    methods: {  
      fetchJobs() {  
        // 使用 fetch API 发起 AJAX 请求  
        fetch('/api/jobs') // 修改为你的后端接口地址  
          .then(response => response.json()) // 将响应解析为 JSON  
          .then(data => {  
            this.jobList = data; // 将获取到的数据赋值给 jobList  
          })  
          .catch(error => {  
            console.error('Error:', error); // 如果请求失败，打印错误信息  
          });  
      }  
    }  
  };    
  </script>
<!-- <script>  
export default {  
  data() {  
    return {  
      jobList: [  
        { id: 1, title: '软件开发工程师', company: 'A公司' },  
        { id: 2, title: '前端开发工程师', company: 'B公司' },  
        { id: 3, title: '后端开发工程师', company: 'C公司' }  
      ]  
    };  
  }  
};  
</script> -->

<style scoped>  
h2 {  
  margin-bottom: 10px;  
}  
ul {  
  list-style-type: none;  
  padding: 0;  
}  
li {
  padding: 10px;  
  border: 1px solid #000000;  
  margin-bottom: 10px;  
}  
</style>
